<template>
  <svg class="my-icon" aria-hidden="true" :style="iconStyle">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script setup>
import {computed} from "vue";
const props = defineProps({
  icon: {type: String, required: true},
  color: {type: String, default: () => 'currentColor'},
  size: {type: String,},
});
const iconName = computed(() => `#icon-${props.icon}`);
const iconStyle = computed(() => ({
  fill: props.color,
  width: props.size ? props.size + 'px' : '1em',
  height: props.size ? props.size + 'px' : '1em',
}));
</script>
<style lang="scss">
.my-icon {
  vertical-align: -0.15em;
  overflow: hidden;
}
</style>